"use client";

import {
  Box,
  Grid,
  Heading,
  HStack,
  Icon,
  Text,
  VStack,
} from "@chakra-ui/react";
import { LuFlaskConical, LuBuilding2, LuDna, LuScroll } from "react-icons/lu";

const SAMPLES: { title: string; prompt: string; icon: typeof LuFlaskConical }[] = [
  {
    title: "Map a competitor's pipeline",
    prompt:
      "What assets does Eugene know about companies with names like Biogen? Focus on their top 5 drugs and the diseases they target.",
    icon: LuBuilding2,
  },
  {
    title: "Drug → disease links",
    prompt:
      "For the drug emicizumab, list every disease indication and any reachable contraindication within 2 hops.",
    icon: LuFlaskConical,
  },
  {
    title: "Gene–protein neighbors",
    prompt:
      "Find the gene-protein neighbors of Factor VIII and which clinical trials reference them.",
    icon: LuDna,
  },
  {
    title: "Patent landscape",
    prompt:
      "Summarize the patents that disclose emicizumab and identify the top assignees.",
    icon: LuScroll,
  },
];

export function EmptyState({
  onQuickStart,
}: {
  onQuickStart?: (prompt: string) => void;
}) {
  return (
    <VStack
      flex="1"
      align="center"
      justify="center"
      px={6}
      py={12}
      spacing={6}
      textAlign="center"
      maxW="860px"
      mx="auto"
    >
      <Box
        w="120px"
        h="120px"
        borderRadius="full"
        bgGradient="radial(accent.400, accent.700 60%, transparent 75%)"
        filter="blur(0.5px)"
        sx={{
          animation: "pulse 3s ease-in-out infinite",
          "@keyframes pulse": {
            "0%,100%": { opacity: 0.6, transform: "scale(1)" },
            "50%": { opacity: 0.95, transform: "scale(1.04)" },
          },
        }}
      />
      <VStack spacing={2}>
        <Heading size="lg" fontWeight={600}>
          Ask Eugene
        </Heading>
        <Text color="text.muted" maxW="560px">
          Explore the Eugene biomedical knowledge graph — 44 node types, 31
          relationship types — and see the agent's reasoning path materialize
          as a live context graph on the right.
        </Text>
      </VStack>
      <Grid
        templateColumns={{ base: "1fr", md: "1fr 1fr" }}
        gap={3}
        w="100%"
        maxW="640px"
        pt={4}
      >
        {SAMPLES.map((s) => (
          <HStack
            key={s.title}
            as="button"
            onClick={() => onQuickStart?.(s.prompt)}
            align="flex-start"
            p={4}
            spacing={3}
            bg="bg.glass"
            border="1px solid"
            borderColor="border.subtle"
            borderRadius="xl"
            textAlign="left"
            transition="all 150ms ease"
            _hover={{
              borderColor: "accent.400",
              transform: "translateY(-1px)",
              boxShadow: "0 12px 28px -18px rgba(58,79,247,0.55)",
            }}
          >
            <Icon as={s.icon} boxSize={5} color="accent.300" />
            <VStack align="flex-start" spacing={1}>
              <Text fontWeight={500} fontSize="sm">
                {s.title}
              </Text>
              <Text fontSize="xs" color="text.muted" noOfLines={2}>
                {s.prompt}
              </Text>
            </VStack>
          </HStack>
        ))}
      </Grid>
    </VStack>
  );
}
